<template>
	<view class="content">
		
		<view class="txt">注:红色为答错的题目,绿色是答对的题目,其他是未答题的。</view>
		<view class="tabSubType">
			<view class="type1" @click="toSelectSubType(1)" :class="{'activeSubType':subType == 1}">科目一</view>
			<view class="type2" @click="toSelectSubType(4)" :class="{'activeSubType':subType == 4}">科目四</view>
		</view>
		<view style="clear: both;"></view>
		<view class="list"  v-for="(item, index) in list" :key="index">
			<view class="title">{{item.name}}</view>
			<view @click="toLookDetail(item2.subOrder)" class="optionPrefix" :class="{'errorOption':item2.ctype == 1,'rightOption':item2.ctype == 2}" v-for="(item2, index2) in item.allSubBos" :key="index2">{{item2.subOrder}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				subType:1,//科目类型
				drivingType:1,//驾驶证类型
				list:[
				]
			}
		},methods:{
			toLookDetail(subOrder){
				uni.setStorageSync('drivingType', this.drivingType);
				uni.setStorageSync('subType', this.subType);
				uni.redirectTo({
					url:'baseAnswer?subOrder='+subOrder
				})
			},
			toSelectSubType(val){
				this.subType = val;
				this.getData(this.subType);
			},getData(subType){
				let opts = {
					url: 'driving/getAllSub/'+this.drivingType+'/'+this.subType,
					method: 'get'
				}; 
				let param = {
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.list = rData;
				}, error => {})
			}
		},onShow() {
			this.subType = uni.getStorageSync('subType');
			this.getData(this.subType);
		}
	}
</script>

<style>
	.tabSubType{
		margin-bottom: 20rpx;
		margin-left: 175rpx;
	}
	.tabSubType .type1,.type2{
		background-color: #fff;
		width: 150rpx;
		float: left;
		font-size: 35rpx;
		text-align: center;
		padding: 10rpx 20rpx;
	}
	
	.activeSubType{
		background-color: #e98f36 !important;
		color: #fff;
	}
	
	.tabSubType .type1{
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
	.tabSubType .type2{
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	
	.txt{
		font-size: 28rpx;
		color: #007AFF;
		margin-bottom: 20rpx;
		width: 100%;
	}
	.list{
		margin-top: 30rpx;
	}
	.title{
		background-color: #C0C0C0;
		color: #555;
		padding: 20rpx;
		font-size: 33rpx;
	}
	.content{
		margin: 30rpx;
	}
	.optionPrefix{
		text-align: center;
		margin: 20rpx;
		font-weight: 800;
		font-size: 32rpx;
		color: #888888;
		width: 75rpx;
		border-radius: 50%;
		display: inline-block;
		line-height: 75rpx;
		box-shadow: 0 0 9rpx 3rpx #b2b2b2;
	}
	.rightOption{
		color: #71da23;
		background-color: #e4f8d6;
	}
	.errorOption{
		color: #ef282e;
		background-color: #fcd4d5;
	}
</style>
